import { defineComponent, PropType, unref, computed } from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue';
import { isString } from '@/utils/is';

let MyIconFont = createFromIconfontCN({
	// scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
	// scriptUrl: '//at.alicdn.com/t/font_2184398_zflo1kjcemp.js',
	// iconfont字体图标本地化，详见：/public/iconfont.js
	scriptUrl: './iconfont.js',
});

export default defineComponent({
	name: 'IconFont',
	props: {
		type: {
			type: String,
			default: '',
		},
		color: {
			type: String,
			default: 'unset',
		},
		size: {
			type: [Number, String] as PropType<string | number>,
			default: 14,
		},
		scriptUrl: {
			// 阿里图库字体图标路径
			type: String,
			default: '',
		},
	},
	setup(props, { attrs }) {
		// 如果外部传进来字体图标路径，则覆盖默认的
		if (props.scriptUrl) {
			MyIconFont = createFromIconfontCN({
				scriptUrl: props.scriptUrl,
			});
		}

		const wrapStyleRef = computed(() => {
			const { color, size } = props;

			const fs = isString(size) ? parseFloat(size as string) : size;

			return {
				color,
				fontSize: `${fs}px`,
			};
		});

		return () => <MyIconFont type={props.type || ''} {...attrs} style={unref(wrapStyleRef)} />;
	},
});
